<template>
  <div class="hobby-module">
    <div class="module-title">
      <span>个人爱好</span>
      <i class=" jl_font">&#xe629;</i>
    </div>
    <div class="edit-box">
      <el-row :gutter="10">
        <el-col :span="24">
          <el-tag :key="tag" v-for="tag in dynamicTags" :closable="true" :close-transition="false" @close="handleClose(tag)">
            {{tag}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="mini" @keyup.enter.native="handleInputConfirm">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加爱好</el-button>
        </el-col>
      </el-row>
      <div class="save-btn-main">
        <el-row :gutter='10'>
          <el-col :span="24">
            <el-button type="primary" @click="submitForm">保存</el-button>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>
<script>
import { saveResumeHobby } from "api";
export default {
  props: {
    value: {
      type: Array,
      default: () => {
        return [];
      }
    }
  },
  data() {
    return {
      dynamicTags: this.value,
      inputVisible: false,
      inputValue: ""
    };
  },
  mounted() {
    console.log("进入hobby");
  },
  methods: {
    submitForm() {
      this.$promise
        .post(saveResumeHobby, { hobby: this.dynamicTags })
        .then(resp => {
          if (resp.status == 1) {
            this.$message({
              message: "保存成功",
              type: "success"
            });
          }
        });
    },
    handleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
    },
    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },

    handleInputConfirm(e) {
      let inputValue = this.inputValue;
      if (inputValue) {
        this.dynamicTags.push(inputValue);
      }
      this.inputVisible = false;
      this.inputValue = "";
      return false;
    }
  }
};
</script>
<style lang="scss" scoped>
.hobby-module {
  background: #fff;
  color: #000;
  .input-new-tag {
    width: 78px;
    margin-left: 10px;
    vertical-align: bottom;
    height: 24px;
    line-height: 22px;
  }
  .save-btn-main {
    margin-top: 20px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 24px;
    line-height: 22px;
    padding-top: 0;
    padding-bottom: 0;
  }
}
</style>
